<div class="row">
    <div class="ten columns centered">
        <div class="content wrapper">
            <div class="row">
                <div class="twelve columns">
                    <div class="content head">
                        <h4><i class="icon-plus-sign"></i> Post New Item</h4>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="eleven columns centered">
                    <form name="newItemForm" novalidate>
                        <fieldset>
                            <legend>Item Information</legend>
                            <div class="row">
                                <div class="two columns">
                                    <label for="title" class="right inline">Title (<span style="color:red;">*</span>) :</label>
                                </div>
                                <div class="ten columns">
                                    <input type="text" name="title" id="title" ng-model="item.data.title" ng-class="{error: newItemForm.title.$invalid&&newItemForm.title.$dirty}" required>
                                    <small ui-if="newItemForm.title.$error.required&&newItemForm.title.$dirty" class="error">Required</small>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label for="price" class="right inline">Price (<span style="color:red;">*</span>) :</label>
                                </div>
                                <div class="ten columns">
                                    <div class="row collapse">
                                        <div class="one columns">
                                            <span class="prefix" ng-class="{error: newItemForm.price.$invalid&&newItemForm.price.$dirty}">Rp. </span>
                                        </div>
                                        <div class="four columns end">
                                            <input type="number" name="price" id="price" ng-model="item.data.price" ng-class="{error: newItemForm.price.$invalid&&newItemForm.price.$dirty}" required>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="five columns end">
                                            <small ui-if="newItemForm.price.$error.required&&newItemForm.price.$dirty" class="error">Required</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label for="category" class="right inline">Category :</label>
                                </div>
                                <div class="ten columns">
                                    <select class="five" ui-select2 name="category" id="category" ng-model="item.data.category">
                                        <option value="" data-placeholder>Choose one category...</option>
                                        <option value="books">Books</option>
                                        <option value="electronics">Electronics</option>
                                        <option value="services">Services</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label for="desc" class="right inline">Description (<span style="color:red;">*</span>) :</label>
                                </div>
                                <div class="ten columns">
                                    <div id="desc-toolbar" class="text-toolbar">
                                        <div class="toolbars">
                                            <div data-wysihtml5-command="bold" title="Make text bold (CTRL + B)" class="command"><div><i class="icon-bold"></i></div></div>
                                            <div data-wysihtml5-command="italic" title="Make text italic (CTRL + I)" class="command"><div><i class="icon-italic"></i></div></div>
                                            <div data-wysihtml5-command="underline" title="Make text underline (CTRL + U)" class="command"><div><i class="icon-underline"></i></div></div>
                                            <div data-wysihtml5-command="insertUnorderedList" title="Insert an unordered list" class="command"><div><i class="icon-list-ul"></i></div></div>
                                            <div data-wysihtml5-command="insertOrderedList" title="Insert an ordered list" class="command"><div><i class="icon-list-ol"></i></div></div>
                                            <div data-wysihtml5-command="justifyLeft" title="Align to left" class="command"><div><i class="icon-align-left"></i></div></div>
                                            <div data-wysihtml5-command="justifyCenter" title="Align to center" class="command"><div><i class="icon-align-center"></i></div></div>
                                            <div data-wysihtml5-command="justifyRight" title="Align to right" class="command"><div><i class="icon-align-right"></i></div></div>
                                            <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p" class="command"><div>P</div></div>
                                            <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" class="command"><div>H1</div></div>
                                            <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" class="command"><div>H2</div></div>
                                            <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3" class="command"><div>H3</div></div>
                                            <div data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h4" class="command"><div>H4</div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    
                                </div>
                                <div class="ten columns">
                                    <textarea text-editor="1" id="desc" rows="10" name="desc"  ng-model="item.data.desc" ng-class="{error: newItemForm.desc.$invalid&&newItemForm.desc.$dirty}" required></textarea>
                                    <small ui-if="newItemForm.desc.$error.required&&newItemForm.desc.$dirty" class="error">Required</small>
                                </div>
                            </div>
                        </fieldset>

                        <fieldset>
                            <legend>Item Options</legend>

                            <div class="row">
                                <div class="two columns">
                                    <label for="expire" class="right inline">Expiration Date :</label>
                                </div>
                                <div class="ten columns">
                                    <input type="hidden" name="expire" id="expire" ng-model="item.data.expire">
                                    <select class="two" ui-select2 name="exp_d" id="exp_d" ng-model="item.data.exp_d">
                                        <option value="" data-placeholder>Date</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                    </select>
                                    <select class="three" ui-select2 name="exp_m" id="exp_m" ng-model="item.data.exp_m">
                                        <option value="" data-placeholder>Month</option>
                                        <option value="0">January</option>
                                        <option value="1">February</option>
                                        <option value="2">March</option>
                                        <option value="3">April</option>
                                        <option value="4">May</option>
                                        <option value="5">June</option>
                                        <option value="6">July</option>
                                        <option value="7">August</option>
                                        <option value="8">September</option>
                                        <option value="9">October</option>
                                        <option value="10">November</option>
                                        <option value="11">December</option>
                                    </select>
                                    <select class="three" ui-select2 name="exp_y" id="exp_y" ng-model="item.data.exp_y">
                                        <option value="" data-placeholder>Year</option>
                                        <option value="2013">2013</option>
                                    </select>
                                    <div class="three field-info"><i>Default to one month after creation date.</i></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label for="act" class="right inline">Active ? :</label>
                                </div>
                                <div class="ten columns">
                                    <input class="fixable" type="checkbox" name="act" id="act" ng-model="item.data.act">
                                    <div class="field-info"><i>An inactive items won't be visible to other users. You can change this setting later. Default to true (active)</i></div>
                                </div>
                            </div>

                            <!-- <div class="row">
                                <div class="two columns">
                                    <label for="private" class="right inline">Private ? :</label>
                                </div>
                                <div class="ten columns">
                                    <input class="fixable" type="checkbox" name="private" id="private" ng-model="item.data.private">
                                    <div class="field-info"><i>A private items will only be visible to a subset of users you specify below. You can change this setting later. Default to false (public)</i></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="two columns">
                                    <label for="uvis" class="right inline">Visible Users :</label>
                                </div>
                                <div class="ten columns">
                                    <input class="five" type="text" name="uvis" id="uvis" ng-model="item.data.uvis">
                                    <div class="five field-info"><i>A subset of users (your friends) who will still be able to see this item regardless of privacy setting above. You have to first add friends. You can change this setting later. Default to empty (no one)</i></div>
                                </div>
                            </div> -->
                        </fieldset>

                        <fieldset>
                            <legend>Item Image</legend>

                            <div class="row">
                                <div class="twelve columns">
                                    <blockquote>
                                        <!-- <p>
                                            You can add up to five images that best describe what your item is.
                                        </p> -->
                                        <p>
                                            Upload an image that best describes what your item is.
                                        </p>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="row">
                                <div class="twelve columns">
                                    <div class="item-img-upload">
                                        <div class="row">
                                            <div class="five columns">
                                                <div id="uploadButtons">
                                                    <input type="file" ng-disabled="opt.disabled" name="imagefiles" id="imagefiles" style="display:none;" img-ajax>
                                                    <button img-add ng-disabled="opt.disabled" class="button radius small"><i class="icon-plus"></i> Add File</button>
                                                    <!-- <button img-start class="button radius small success"><i class="icon-upload-alt"></i> Start Upload</button>
                                                    <button img-cancel class="button radius small alert"><i class="icon-ban-circle"></i> Cancel Upload</button> -->
                                                </div>
                                            </div>
                                            <div class="seven columns">
                                                <div class="radius progress success" style="display:none;"><span class="meter"></span></div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="twelve columns">
                                                <div id="uploadList">
                                                    <table role="presentation" class="twelve" ui-if="item.data.imgs[0]">
                                                        <tbody>
                                                            <tr ng-repeat="img in item.data.imgs" class="col-preview">
                                                                <td class="img-preview" ng-bind-html-unsafe="opt.th[$index]"></td>
                                                                <td class="img-filename"><span ng-bind-html-unsafe="img.files[0].name"></span></td>
                                                                <td class="img-size"><span>{{ img.files[0].size | formatsize }} KB</span></td>
                                                                <td class="img-progress"><div id="progress{{$index}}" class="radius progress nice" ng-style="opt.prog[$index]"><span class="meter"></span></div></td>
                                                                <td class="img-start"><button ui-if="opt.prog[$index].opacity" img-upload="$index" id="imgStart" class="button radius small success">Start</button></td>
                                                                <td class="img-cancel-delete">
                                                                    <button ui-if="opt.prog[$index].opacity" img-upload-cancel="$index" id="imgCancel" class="button radius small alert">Cancel</button>
                                                                    <button ui-if="!opt.prog[$index].opacity" img-upload-delete="$index" id="imgDelete" class="button radius small alert">Delete</button>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <div class="row">
                            <div class="eight columns centered">
                                <div style="text-align: center;">
                                    <button class="button radius" ng-click="submit()">Submit</button>
                                    <!-- <input class="button radius" type="submit" name="submit" id="submit" value="Submit"> -->
                                    <button class="button radius alert">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>